<template>
  <page-view :title="false" >
    <a-card :bordered="false">
      <div class="table-operator">
        <a-button type="primary" v-action:productCategoryAdd @click="handleCreate()">新增</a-button>
      </div>
      <a-table
        ref="table"
        :columns="columns"
        :rowKey="record => record.id"
        :dataSource="dataList"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        :show-pagination="false">

        <span slot="action" slot-scope="text, record">
          <a style="margin-right:10px;" href="javascript:;" v-action:productCategoryEdit @click="handleEdit(record)">编辑</a>
          <a href="javascript:;" v-action:productCategoryDelete @click="handleDel(record)">删除</a>
        </span>

        <span slot="leaf" slot-scope="text">
          {{ text | leafFilter }}
        </span>

      </a-table>

      <category-modal ref="categoryModal" @ok="handleSaveOk" />

    </a-card>
  </page-view>

</template>
<script>
import CategoryModal from './CategoryModal'
import { PageView } from '@/layouts'
import { categoryTree, categoryDelete } from '@/api/product'

export default {
  name: 'Category',
  components: {
    PageView,
    CategoryModal
  },
  data () {
    return {
      columns,
      visible: false,
      form: this.$form.createForm(this),
      // 加载数据方法 必须为 Promise 对象
      dataList: [],
      selectedRowKeys: [], // Check here to configure the default column
      selectedRows: []
    }
  },
  methods: {
    handleEdit (record) {
      this.$refs.categoryModal.handleEdit(record)
    },
    handleCreate () {
      if (this.selectedRows.length > 1) {
        this.$message.error('不能多选')
        return
      }
      const record = {
        parentId: 0,
        level: 0,
        orderNum: 1,
        leaf: false
      }

      if (this.selectedRows.length === 1) {
        record.parentId = this.selectedRows[0].id
        record.level = this.selectedRows[0].level + 1
      }
      if (record.level > 3) {
        this.$message.error('只支持三级目录', 1)
        return
      }
      this.$refs.categoryModal.handleCreate(record)
    },
    handleDel (record) {
      categoryDelete(record).then(res => {
        if (res.status === 0) {
          this.$message.success('成功')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleSaveOk () {
      this.loadData()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    loadData () {
      categoryTree().then(res => {
        console.log(res)
        this.dataList = res.data
      })
    }
  },
  created () {
    this.loadData()
  },
  filters: {
    leafFilter (leaf) {
      const leafMap = {
        true: '是',
        false: '否'
      }
      return leafMap[leaf]
    }
  }
}

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
    width: '12%'
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: '12%'
  },
  {
    title: '叶子',
    dataIndex: 'leaf',
    key: 'leaf',
    scopedSlots: { customRender: 'leaf' }
  },
  {
    title: '层级',
    dataIndex: 'level',
    key: 'level'
  },
  {
    title: '序号',
    dataIndex: 'orderNum',
    key: 'orderNum'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: '30%'
  }
]
</script>
